<template>
	<view>
		<view class="flex flex-column background padding ">
			<view class="flex flex-row ">
				<u-avatar size="50px" :src="detailsInfo.user.avatarUrl"></u-avatar>
				<view class="margin-left">
					<u--text color="#000000" :text="detailsInfo.user.username"></u--text>
					<u--text color="grey" :text="formatDate(detailsInfo.createdAt)"></u--text>
				</view>
			</view>

			<!-- 标题 内容 -->
			<view>
				<u--text class="padding-top" lineHeight="27px" color="black" size="18"
					:text="detailsInfo.content"></u--text>
				<u-row gutter="1" class="flex flex-wrap"> <!-- 设置间隔为10 -->
					<u-col span="4" v-for="(items,indexs) in detailsInfo.images" :key="indexs">
						<u-image class="padding-top" height="90px" width="110px" :src="items.imageUrl" />
					</u-col>
				</u-row>

				<view class="flex flex-row justify-around margin-top" @click="addLike(item.postId)">
					<u-icon labelPro="left" :label="detailsInfo.likeCount" name="thumb-up" size="25px"></u-icon>
					<u-icon class="margin-left" :label="detailsInfo.likeCount" name="chat" size="25px"></u-icon>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailsInfo: {},
				id: null,
			}
		},
		onLoad(option) {
			console.log(option.postId);
			this.id = option.postId;
			this.getData()
		},
		methods: {
			//根据用户Id获取posts
			getData(id) {
				uni.request({
					url: 'http://localhost:8083/posts/postById/' + this.id,
					success: (res) => {
						console.log(res.data)
						if (res.data && res.data.user && res.data.images) { // 确保数据存在
							this.detailsInfo = res.data;
						} else {
							// 处理数据不完整或结构不匹配的情况
							console.error('数据不完整或结构不匹配', res.data);
						}
					},
					fail: (err) => {

					}
				})
			},
			//时间格式化
			formatDate(dateString) {
				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以加1
				const day = ('0' + date.getDate()).slice(-2);
				return `${year}-${month}-${day}`;
			},

		}
	}
</script>